<template>
    <div>
        <Card dis-hover :bordered="false">
            <Button type="primary" @click="handleAddEdit(addEdit=true)">新增</Button>
            <Table highlight-row :columns="columns" :data="widthPage" class="ivu-mt">
                <template slot="status" slot-scope="{row}">
                    <Badge v-if="row.status === 0" status="success" text="正常" />
                    <Badge v-if="row.status === 1" status="error" text="停用" />
                </template>
                <template slot="groupPerson" slot-scope="{row}">
                    <tag>{{row.groupPerson[0]}}</tag>
                    <tag>{{row.groupPerson[1]}}</tag>
                </template>
                <template slot="action" slot-scope="{row}">
                    <a @click="handleAddEdit(addEdit=false)">{{row.action}}</a>
                </template>
            </Table>
        </Card>
        <Modal :title="addEdit? '新增':'编辑'" v-model="addEditModal">
            <Form :label-width="100">
                <FormItem label="用户组名称:" required>
                    <Input placeholder="请输入" />
                </FormItem>
                <FormItem label="组成员:" required>
                    <Select v-model="formData.person" multiple filterable>
                        <OptionGroup label="角色">
                            <Option v-for="item in roleList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </OptionGroup>
                        <OptionGroup label="职能">
                            <Option v-for="item in dutyList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </OptionGroup>
                        <OptionGroup label="用户组">
                            <Option v-for="item in groupList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </OptionGroup>
                        <OptionGroup label="人员">
                            <Option v-for="item in personList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </OptionGroup>
                    </Select>
                </FormItem>
                <FormItem label="状态:">
                    <Switch v-model="formData.status" />
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>
<script>
export default {
    data() {
        return {
            addEditModal: false,
            addEdit: true,
            formData: {
                person: '',
                status: true
            },
            person: '',
            personList: [
                {
                    value: '高玲',
                    label: '高玲'
                },
                {
                    value: '王艳',
                    label: '王艳'
                },
                {
                    value: '张在峰',
                    label: '张在峰'
                }
            ],
            roleList: [
                {
                    value: '咨询',
                    label: '咨询'
                },
                {
                    value: '回访员',
                    label: '回访员'
                }
            ],
            dutyList: [
                {
                    value: '经理',
                    label: '经理'
                },
                {
                    value: '普通员工',
                    label: '普通员工'
                }
            ],
            groupList: [
                {
                    value: '管理组',
                    label: '管理组'
                },
                {
                    value: '咨询组',
                    label: '咨询组'
                }
            ],
            columns: [
                {
                    title: '用户组名称',
                    key: 'name'
                },
                {
                    title: '部门/人员',
                    key: 'groupPerson',
                    slot: 'groupPerson'
                },
                {
                    title: '状态',
                    slot: 'status'
                },
                {
                    title: '操作',
                    key: 'action',
                    slot: 'action'
                }
            ],
            widthPage: [
                {
                    name: '客服组',
                    person: '高玲,王艳',
                    status: 0,
                    groupPerson: ['咨询部', '王艳'],
                    action: '编辑'
                },
                {
                    name: '客服2组',
                    person: '高玲,王艳',
                    groupPerson: ['销售部', '高玲'],
                    status: 1,
                    action: '编辑'
                }
            ]
        }
    },
    methods: {
        handleAddEdit() {
            this.addEditModal = true
        }
    }
}
</script>
